<template>
  <div class="classifyBox">
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <div class="mainBox">
      <div class="leftBox">
        <p
          v-for="(v, i) in listInfo"
          :key="i"
          :class="active == i ? 'active' : ''"
          @click="pFun(v, i)"
        >
          {{ v.cate_name }}
        </p>
      </div>
      <div class="rightBox">
        <classifyChild
          :name="name"
          :listInfo="listInfo"
          :active="active"
          @methodName="methodName"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { onMounted, getCurrentInstance } from "vue";
import classifyChild from "@/components/classifyChild.vue";
export default {
  // 组件
  components: {
    classifyChild,
  },
  setup() {
    const {
      proxy: {
        $api: {
          store: { getCategory },
        },
      },
    } = getCurrentInstance();
    const value = ref("");
    const active = ref("");
    const name = ref("");
    const listInfo = ref([]);

    onMounted(() => {
      getCategoryUrl();
    });
    const getCategoryUrl = () => {
      getCategory().then((res) => {
        console.log(res.data);
        listInfo.value = res.data;
      });
    };
    const methodName = (val) => {
      active.value = val.active;
    };
    //
    const pFun = (val, index) => {
      name.value = val.cate_name;
      active.value = index;
      // console.log(active.value)
    };
    return { value, listInfo, active, pFun, methodName, name };
  },
};
</script>

<style lang="scss" scoped>
.classifyBox {
  width: 100%;
  height: 100%;
  background: #eee;
  display: flex;
  flex-direction: column;

  .mainBox {
    flex: 1;
    width: 100%;
    height: 90%;
    display: flex;
    background: #eee;
  }

  .leftBox {
    width: 100px;
    height: 100%;
  }

  .leftBox p {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    // border-bottom: 1px solid #ccc;
    font-size: 14px;
  }

  .active {
    background: white;
    color: red;
    border-left: 3px solid red;
    font-weight: bold;
  }

  .rightBox {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: scroll;

    background: skyblue;
  }
}
</style>
